<template>
  <div class="zlcProjectDetails" v-show="show" data-marker="true" @click="closeModel">
    <div class="main">
      <div class="header">
          <div v-gradientTitle>
              {{ datas.zlcName  }}
          </div>
          <div class="icon" data-marker="true" @click="closeModel">
              x
          </div>
      </div>
        <div class="body">
            <div class="ps">
                <div class="label">
                    <span class="icon">

                    </span>
                    备注
                </div>
                <div class="data">
                    {{ datas.details }}
                </div>
            </div>
            <div class="files">
                <a-tree
                    showLine
                    showIcon
                    :fieldNames="fieldNames"
                    :tree-data="treeData"
                    @select="selectTree"
                >

                    <template #title="props">
                        <span v-if="props.isParent">
                            <img src="/src/assets/files.png" alt="" class="zlcIcon">
                        </span>
                        <a-tooltip>
                            <template slot="title">
                                {{ props.title }}
                            </template>
                            {{ props.title }}
                        </a-tooltip>
                        <span class="fileNum">
                            {{ !props.isLeaf ? props.child.length : '' }}
                        </span>
                    </template>

                    <template v-slot:png>
                        <img src="/src/assets/pngIcon.png" alt="" class="zlcIcon">
                    </template>
                    <template v-slot:pdf>
                        <img src="/src/assets/pdfIcon.png" alt="" class="zlcIcon">
                    </template>
                    <template v-slot:docx>
                        <img src="/src/assets/docxIcon.png" alt="" class="zlcIcon">
                    </template>
                    <template v-slot:xlsx>
                        <img src="/src/assets/xlsxIcon.png" alt="" class="zlcIcon">
                    </template>
                    <template v-slot:video>
                        <img src="/src/assets/videoIcon.png" alt="" class="zlcIcon">
                    </template>
                </a-tree>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { ref, computed,watch } from 'vue'
import { api as viewerApi } from "v-viewer"
  export default {
      name: 'zlcProjectDetails',
      props:{
        datas:{
            type: Object,
            default(){
                return {}
            }
        }
      },
      setup(props, ctx){

          let staticUrl = import.meta.env.VITE_APP_API_BASE_URL
          let downLoadUrl = import.meta.env.VITE_UPLOADFILE_URL
        let show = ref(false)
          let fielsArray = ref('')
        let showModel = () => {
            show.value = true
        }


          let closeModel = ($event) => {
              if($event.target.dataset.marker){
                  show.value = false
              }
          }

          let filesArr = computed({
              get(){
                  return fielsArray.value
              },
              set(val){
                  fielsArray.value = val
              }
          })

          let fieldNames = ref({
              children: 'child',
              title: 'name',
              key: 'key'
          })


          let treeData = ref([])

          let fileName = file => {
              if(file){
                  return file.split("_")[0].split("/")[1] + "." + file.split('.')[1]
              }else{
                  return ''
              }
          }

          let iconType = type => {
              let pdfArr = ['pdf','pdfx','ppt','pptx']
              let docArr = ['docx', 'doc']
                  let xls = ['xlsx', 'xls']
              let videoArr = ['avi','wmv','mpeg','mpg','mp4','swf','flv','rm','ram','mov']
              if(pdfArr.includes(type)){
                  return 'pdf'
              }else if(docArr.includes(type)){
                  return 'docx'
              }else if(xls.includes(type)){
                  return 'xlsx'
              }else if(videoArr.includes(type)) {
                  return "video"
              }else{
                  return 'png'
              }
          }

          let selectTree = (selectkeys, { selected, node } = e) => {

              if(!selected) return
              if(node.slots.icon == 'png'){
                  const $viewer = viewerApi({
                      images: [staticUrl + node.file]
                  })
              }else if(node.slots.icon == 'pdf'){
                  // window.open(staticUrl + node.file)

                  let url = `${staticUrl}generic/web/viewer.html?file=${downLoadUrl}${node.file}`
                  window.open(url)

              }else{
                    window.open( downLoadUrl+ node.file)
              }

          }

          watch(() => props.datas, (newVal) => {
              if(!newVal) return

              let a =  [
                  {
                      name: '现场附件',
                      title: '现场附件',
                      key: '0-0',
                      isLeaf: newVal.attachments ? false : true,
                      selectable: false,
                      isParent: true,
                      child: newVal.attachments ? newVal.attachments.split(",").map((item, index) => {
                          let type = item.split('.')[1]
                          return {
                              name: fileName(item),
                              key: "0-0-" + index,
                              title: fileName(item),
                              file: item,
                              slots:{
                                  icon: iconType(type)
                              }
                          }
                      }) : []
                  },
                  {
                      name: '全景照片',
                      title: '全景照片',
                      key: '0-1',
                      isLeaf: newVal.assetsUrl ? false : true,
                      selectable: false,
                      isParent: true,
                      child: newVal.assetsUrl ? newVal.assetsUrl.split(",").map((item, index) => {
                          let type = item.split('.')[1]
                          return {
                              name: fileName(item),
                              key: "0-1-" + index,
                              title: fileName(item),
                              file: item,
                              slots: {
                                  icon: iconType(type)
                              }
                          }
                      }) : []
                  }
              ]

              treeData.value = a
          })
          return {
            staticUrl,
              fielsArray,
            show,
            showModel,
            closeModel,
              filesArr,
              treeData,
              fileName,
              fieldNames,
              selectTree
          }
      }
  }
</script>

<style lang="less" scoped>
.zlcProjectDetails{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  .main{
    width: 50%;
    height: 50%;
    background: red;
    background: rgba(25, 25, 40, 0.7);
    box-shadow: 0px 0px 20px rgba(145, 144, 144, 0.5);
    .header{
      width: 100%;
      height: 70px;
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-evenly;
      border-bottom: 1px solid #fff;
      font-size: 30px;
      .icon{
        position: absolute;
        right: 10px;
        width: 30px;
        height: 30px;
        //line-height: 30px;
        border-radius: 50%;
        border: 1px solid #fff;
        color: #fff !important;
        text-align: center;
        cursor: pointer;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-evenly;
        &:hover{
          background: rgba(255, 0, 0, 0.5)
        }
      }
    }
    .body{
      height: calc(100% - 50px);
      display: flex;
      flex-direction: row;
        padding: 20px;
        box-sizing: border-box;
      .ps, .files{
        width: 50%;
        height: 100%;
        overflow-y: auto;
      }
        .ps{
            .label{
                display: flex;
                flex-direction: row;
                align-items: center;
                .icon{
                    display: inline-block;
                    width: 5px;
                    height: 16px;
                    border-radius: 4px;
                    background: blue;
                    margin-right: 5px;
                }
            }
            .data{
                padding-top: 20px;
                box-sizing: border-box;
            }
        }
      .files{
        &:deep(.ant-tree){
          background: transparent;
          color: #fff;
            .ant-tree-treenode-selected{
                color: black;
            }
            .ant-tree-indent-unit{
                &::before{
                    position: absolute;
                    top: 0;
                    inset-inline-end: 12px;
                    bottom: -4px;
                    border-inline-end: 1px solid #3b91f5;
                    content: "";
                }
            }
            .ant-tree-indent-unit.ant-tree-indent-unit-end{
                &::before{
                    position: absolute;
                    top: 0;
                    inset-inline-end: 0px;
                    bottom: -4px;
                    border-inline-end: none;
                    content: "";
                }
            }
            .ant-tree-switcher{
                color: #3b91f5;
            }
          .ant-tree-switcher-noop{
            display:none;
          }
          .zlcIcon{
            width: 18px;
            height: 18px;
          }
            .fileNum{
                width: fit-content;
                height: fit-content;
                padding: 0 18px;
                display: inline-block;
                color: #fff;
                background: rgba(108, 99, 99, 0.5);
                border-radius: 20px;
                margin-left: 5px;
                font-size: 12px;
            }
        }
      }
    }
  }

}
</style>
